<template>
  <div class="modal_outer">
    <div class="modal_confirm">
      <div class="modal_content">即将打开{{siteinfo.app_name}}，领取奖励</div>
      <div class="modal_button">
        <div class="cancel" @click="cancel">取消</div>
        <div class="confirm" @click="goReward">前往领取</div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "redPackageModal",
  computed:{
    ...mapGetters({siteinfo:'siteinfo'}),
  },
  methods:{
    cancel(){
      this.$emit('cancel')
    },
    goReward(){
      this.$emit('getReward')
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/common/common.scss";
.modal_outer{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  border-radius: 0px 0px 0px 0px;
  z-index: 99;
  .modal_confirm{
    width: 530rpx;
    height: 484rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0,0,0,0.2);
    border-radius: 30rpx;
    padding: 0 55rpx;
    opacity: 1;
    @include center;
  }
  .modal_content{
    padding: 150rpx 0;
    text-align: center;
    margin: 0 auto;
    font-size: 36rpx;
    font-weight: bold;
    color: #222222;
  }
  .modal_button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cancel{
      width: 240rpx;
      height: 90rpx;
      border-radius: 43rpx;
      border: 1px solid #2776F9;
      background: #ffffff;
      font-size: 36rpx;
      font-weight: bold;
      color: #2776F9;
      text-align: center;
      line-height: 90rpx;
    }
    .confirm{
      width: 240rpx;
      height: 90rpx;
      border-radius: 43rpx;
      border: 1px solid #2776F9;
      background: #2776F9;
      font-size: 36rpx;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
      line-height: 90rpx;
    }
  }
}
</style>